<template>
  <!-- 表单弹窗 -->
  <a-modal
    v-bind="$attrs"
    v-on="$listeners"
    :footer="null"
    :title="headerTitle"
    width="900px"
    :visible.sync="dialogVisible"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <!-- 统计 -->
      <div class="mb20">
        <span>平均分：{{ forms.score || 0 }}</span>
        <a-divider type="vertical"></a-divider>
        <span>评价人数：{{ forms.personNum || 0 }}</span>
      </div>
      <!-- 表格 -->
      <a-table
        ref="table"
        tableLayout="fixed"
        size="default"
        rowKey="id"
        :columns="columns"
        :data-source="forms.personScores || []"
        :pagination="false"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="handleManage(record.id)">查看</a>
        </template>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { carUsePersonScore } from '@/api/office/vehicle/config' // api

export default {
  props: {
    // api对象
    api: {
      type: Object,
      default: () => null,
    },
    // api请求方法
    apiName: {
      type: String,
      default: () => 'getDetail',
    },
    // 显隐控件
    visible: {
      type: Boolean,
      default: () => false,
    },
    // 标题
    headerTitle: {
      type: String,
      default: () => '评价明细',
    },
    // 明细id
    id: {
      type: [String, Number],
      require: true,
      default: () => '',
    },
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      },
    },
  },
  data() {
    return {
      forms: {},
      loading: false, // 加载控件
      columns: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          },
        },
        {
          title: '评价时间',
          ellipsis: true,
          dataIndex: 'scoreTime',
        },
        {
          title: '得分(90分)',
          ellipsis: true,
          dataIndex: 'score',
        },
        {
          title: '评价人',
          ellipsis: true,
          dataIndex: 'creator',
        },
        {
          title: '评价明细',
          dataIndex: 'action',
          width: 120,
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  methods: {
    /**
     * 关闭
     */
    handleCancel() {
      this.dialogVisible = false
    },
    /**
     * 查看
     */
    handleManage(id) {
      let query = {
        id,
        checkType: 1,
      }
      this.$router.push({
        name: '/vehicle/driverManagementDetail',
        query,
      })
    },
  },
  watch: {
    visible(e) {
      if (e) {
        this.loading = true
        carUsePersonScore
          .getDetail({ id: this.id })
          .then((res) => {
            this.loading = false
            this.forms = res.data
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.forms = {}
        this.loading = false
      }
    },
  },
}
</script>
